import React from 'react';
import { NavLink } from 'react-router-dom';
import { cn } from '@/lib/utils';
import { useTheme } from '@/hooks/useTheme';
import { useSystem } from '@/contexts/systemContext';

interface NavItemProps {
  icon: string;
  label: string;
  path: string;
  active?: boolean;
}

const NavItem: React.FC<NavItemProps> = ({ icon, label, path, active }) => {
  return (
    <NavLink 
      to={path}
      className={({ isActive }) => 
        cn(
          "flex items-center py-2.5 px-6 my-1 rounded-lg transition-all duration-300",
          isActive 
            ? "bg-blue-600 text-white" 
            : "text-gray-600 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-white"
        )
      }
    >
      <i className={`fa-solid ${icon} text-lg mr-3 flex items-center justify-center w-5 h-5`}></i>
      <span className="text-sm font-medium">{label}</span>
    </NavLink>
  );
};

export default function Sidebar() {
  const { isDark } = useTheme();
  const { currentSystem, systems, switchSystem, systemManagementMenus, helpCenterMenus } = useSystem();
  
  return (
    <div className="bg-white dark:bg-gray-900 py-6 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 overflow-y-auto h-full">
      <div className="px-4 mb-8">
        {/* 系统功能菜单 */}
        <div className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase mb-2 px-4">
          系统功能
        </div>
        
        {currentSystem.menus.map((menu) => (
          <NavItem 
            key={menu.id}
            icon={menu.icon}
            label={menu.label}
            path={menu.path}
          />
        ))}
        
        {/* 系统管理菜单（始终显示） */}
        <div className="px-4 mt-8 mb-4">
          <div className="border-t border-gray-200 dark:border-gray-700 pt-3">
            <div className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase mb-2 px-4">
              系统管理
            </div>
            
            {systemManagementMenus.map((menu) => (
              <NavItem 
                key={menu.id}
                icon={menu.icon}
                label={menu.label}
                path={menu.path}
              />
            ))}
            
            <div className="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase mb-2 px-4 mt-4">其他工具</div>
            {helpCenterMenus.map((menu) => (
              <NavItem 
                key={menu.id}
                icon={menu.icon}
                label={menu.label}
                path={menu.path}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}